<template>
  <div class="customers-data">
    <div class="search-content">
      <el-input v-model="searchObj.store_name" placeholder="请输入经销商名称" clearable class="input w200"></el-input>

      <el-select v-model="searchObj.sourceId" clearable placeholder="渠道来源">
        <el-option
          v-for="item in sourceList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>

      <el-select v-model="searchObj.nowStage" clearable placeholder="所处阶段">
        <el-option
          v-for="item in stageList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>

      <!-- <el-date-picker
        v-model="value"
        type="daterange"
        start-placeholder="录入开始时间"
        end-placeholder="录入结束时间"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd"
      ></el-date-picker>-->
      <el-date-picker
        v-model="searchObj.createTimeStart"
        type="date"
        placeholder="录入开始时间"
        value-format="yyyy-MM-dd"
        default-time="00:00:00"
      ></el-date-picker>
      <el-date-picker
        v-model="searchObj.createTimeEnd"
        type="date"
        placeholder="录入结束时间"
        value-format="yyyy-MM-dd"
        default-time="23:59:59"
      ></el-date-picker>
      <el-input v-model="searchObj.member_mobile" placeholder="客户手机" clearable class="input w200"></el-input>

      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </div>
    <div class="logList" style="width:100%;">
      <el-table
        :data="aList"
        border
        style="width: 100%"
        :height="oHeight"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
      >
        <el-table-column fixed prop="index" label="序号" key="id" width="80"></el-table-column>
        <el-table-column
          prop="store_name"
          label="所属经销商"
          key="store_name"
          width="120"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column prop="clueSource" label="渠道来源" key="recharge_amount"></el-table-column>
        <el-table-column prop="member_name" label="姓名" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="member_mobile" label="电话" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="levelSign" label="意向级别" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="interestedCar" label="意向车型" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="bookCar" label="订车车型" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="deliveryCar" label="交车车型" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="stageName" label="跟进阶段" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="createTime" label="录入时间" :show-overflow-tooltip="true"></el-table-column>
      </el-table>
      <div class="bottom-flex" type="flex">
        <div class="grid-content bg-purple">
          <el-button type="primary" class="exportButton">
            <el-link type="primary" style="color: #fff" :href="href">导出</el-link>
          </el-button>
        </div>
        <pagination
          :arr="aList"
          :total="total"
          :currentPage="currentPage"
          :handleSizeChange="handleSizeChange"
          :handleCurrentChange="handleCurrentChange"
        ></pagination>
      </div>
    </div>
  </div>
</template>

<script>
import pagination from "@/components/pagination/pagination.vue";
import { resize } from "@/common/js/height.js";
import Qs from "qs";

export default {
  data() {
    return {
      href: "",
      value: "", // 时间范围
      aList: [],
      oHeight: 800,
      total: 1,
      currentPage: 1,
      searchContent: {
        //该变量一直在变，用来定义默认搜索内容
        storeName: ""
      },
      searchObj: {
        //该变量定义查询传参
        pageSize: localStorage.getItem("eachNum")
          ? parseInt(localStorage.getItem("eachNum"))
          : 10,
        page: 1,
        store_name: "",
        sourceId: "",
        nowStage: "",
        createTimeStart: "",
        createTimeEnd: "",
        member_mobile: ""
      },
      stageList: [],
      sourceList: []
    };
  },
  components: {
    pagination
  },
  watch: {
    aList: {
      deep: true,
      handler() {
        this.href = "";
        let obj = {};
        for (let i in this.searchObj) {
          if (this.searchObj[i]) {
            obj[i] = JSON.parse(JSON.stringify(this.searchObj[i]));
          }
        }
        obj.is_export = 1;
		obj = Qs.stringify(obj);
		let isServer = this.$store.state.isServer;
        if (!isServer) {
          this.href +=
            "http://api.chejj.cn/admin/statistics/index.php?act=saleCustomerStatistics&op=customerList&" +
            obj;
        } else {
          let host = location.origin;
          host = host.replace('admin','api');
          this.href +=
            host +
            "/admin/statistics/index.php?act=saleCustomerStatistics&op=customerList&" +
            obj;
        }
      }
    }
  },
  methods: {
    getList() {
      var that = this;
      this.searchObj.page = that.currentPage;
      this.$http
        .post(
          "/admin/statistics/index.php?act=saleCustomerStatistics&op=customerList",
          this.searchObj
        )
        .then(
          res => {
            if (res.code == 1) {
              this.aList = res.data.list;
              this.total = parseInt(res.data.totalCount);
            } else {
              alert(res.msg);
            }
          },
          err => {
            alert(err);
          }
        );
    },
    search() {
      this.currentPage = this.searchObj.page = 1;
      this.getList();
    },
    reset() {
      //重置搜索列表
      //1、获取搜索的内容
      for (let i in this.searchObj) {
        this.searchObj[i] = "";
      }
      this.searchObj.pageSize = localStorage.getItem("eachNum")
        ? parseInt(localStorage.getItem("eachNum"))
        : 10;
      this.currentPage = 1;
      this.searchObj.page = 1;

      //2、获取内容列表
      this.getList();
    },
    //每页数据
    handleCurrentChange: function(val) {
      this.currentPage = val;
      /*请求数据*/
      this.getList();
    },
    //分组一页多少数据
    handleSizeChange(val) {
      this.currentPage = 1;
      this.searchObj.page = 1;
      localStorage.setItem("eachNum", val);
      this.searchObj.pageSize = this.eachNum = val;
      /*请求数据*/
      this.getList();
    },
    // 获取跟进阶段
    getStage() {
      this.$http
        .post(
          "/admin/statistics/index.php?act=saleCustomerStatistics&op=getStages"
        )
        .then(res => {
          if (res.code == 1) {
            this.stageList = res.data;
          }
        });
    },
    // 获取渠道来源
    getSources() {
      this.$http
        .post(
          "/admin/statistics/index.php?act=saleCustomerStatistics&op=getSources"
        )
        .then(res => {
          if (res.code == 1) {
            this.sourceList = res.data;
          }
        });
    },
    // 改变时间
    changeTime(value) {
      this.searchObj.createTimeEnd = value[1];
      this.searchObj.createTimeStart = value[0];
    }
  },
  created() {
    //页面刷新就执行
    localStorage.eachNum = "";
    resize(this);
    this.getList();
    this.getStage();
    this.getSources();
  }
};
</script>

<style scoped lang="scss">
.exportButton {
  margin-top: 10px;
  margin-left: 10px;
}
.bottom-flex {
  display: flex;
  justify-content: space-between;
}
</style>
